<template>
    <n-scrollbar>
        <el-main class="space-context">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="动漫" name="first">
                    <n-scrollbar>
                        <ul class="list">
                            <li v-for="index in 24" :key="index" class="list-card"
                                @click="this.$router.push('/fantasyland/details')">
                                <n-card title="动漫名">
                                    <template #cover>
                                        <n-image lazy src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                                            fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg">
                                            <template #placeholder>
                                                <div class="loading">
                                                    Loading
                                                </div>
                                            </template>
                                        </n-image>
                                    </template>
                                    标签类型
                                </n-card>
                            </li>
                        </ul>
                    </n-scrollbar>
                </el-tab-pane>
                <el-tab-pane label="漫画" name="second">
                    <n-scrollbar>
                        <ul class="list">
                            <li v-for="index in 24" :key="index" class="list-card"
                                @click="this.$router.push('/haven/details')">
                                <n-card title="漫画名">
                                    <template #cover>
                                        <n-image lazy src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                                            fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" />
                                    </template>
                                    标签类型
                                </n-card>
                            </li>
                        </ul>
                    </n-scrollbar>
                </el-tab-pane>
                <el-tab-pane label="游戏" name="third">
                    <el-col :span="24" class="euphoria">
                        <ul class="modules">
                            <li v-for="i in 9" :key="i" class="card" @click="this.$router.push('/euphoria/details')">
                                <n-image lazy
                                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.gamersky.com%2Fimage2015%2F11%2F20151105py_4%2Fgamersky_07origin_13_201511511452BC.jpg&refer=http%3A%2F%2Fimg1.gamersky.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1702717379&t=6f71816159953566583f3140f4d41569"
                                    fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg" />
                            </li>
                        </ul>
                    </el-col>
                </el-tab-pane>
                <el-tab-pane label="茶话" name="fourth">

                </el-tab-pane>
            </el-tabs>
        </el-main>
    </n-scrollbar>
</template>

<script setup>
const activeName = ref('first')

const handleClick = (tab, event) => {
    console.log();
}
</script>

<style scoped>
.space-context {
    height: calc(100% - 60px);
}

.euphoria {
    width: 100%;
    height: fit-content;
}

.modules {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.card {
    width: calc(100%/3.3);
    max-height: 300px;
    margin: 10px;
    border-radius: 8px;
    background-color: #ddd;
}

.card:hover {
    position: relative;
    bottom: 5px;
    box-shadow: 1px 1px 10px #ccc;
    transition: 0.5s;
}

.loading {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0001;
}

.n-image {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}
</style>